FrontJavascript

this

javascript, weirdparts

자바스크립트에서 함수가 실행될 때마다 새로운 Execution context를 생성하고 각 Execution context 는 variable Environmnet, Outer Environment 그리고 this 를 생성한다. this 는 함수의 위치, 호출되는 방식에 따라 특정 객체를 가르키게 된다.

5 cases of this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 1. 전역 호출 시 - 전역객체
console.log(this);  // Window {...}

//2. 함수 내 일반 호출 시 - 전역객체
function a() {
    console.log(this);
    this.newVariable = 'hello';  //전역객체(Window) 에 새 함수 할당
}
a(); // window {...}
this.newVariable; // hello

//3. 메소드(객체 내 함수) 호출 시 - 메소드 포함하는 객체
var c = {
    name: 'The c object',
    log: function() {
    	this.name = 'Updated c object';
        console.log(this);
    }
}

//4. new keyword - 인스턴스(new 키워드로 생성한) 객체
function person(name) {
    this.name = name;
}
var tom  = new Person('Tom');

console.log(tom.name); // Tom
console.log(name); // error!

//5. .call , .apply - 각 함수 첫번째 인자 객체
function speak() {
    var greeting = 'Hello i'm + this.name;
}

var person = {
	name: 'tom',
	age: 18
};

speak.call(person); // tom

c.log(); // c, Object { name:'Updated c object', log: function() {console.log(this)}}

console.log(newVariable); // hello
a();  // Window

주의할 점 (메소드 내부함수에서 this 호출 시 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var c = {
    name: 'The C object';
    log: function() {
        
        this.name = 'Updated c object';
        console.log(this);
        
        // 메소드의 내부함수의 this는 또 전역을 가르키는 오류 있음
        var setname = function(newName) {
            this.name = newName;
        }
     
        setName('Updated again! The c object');
        console.log(this);ß
    }
}

c.log();
//오히려 전역객체 name 바뀜, 왜??
window.name = 'Updated again! c object';

//메소드의 this는 그 객체인데 변경이 안됐다? 
// Object {name:'Updated c object', log: function}
// Object {name:'Updated c object', log: function}

메소드의 this는 속해있는 객체를 가르키지만, 또 메소드 내부 함수는 전역객체를 가르키는 오류가 있다. 이를 방지하기 위해서는 this를 변수에 명시적으로 지정해주고 그 변수를 활용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var c = {
    name: 'The C object';
    log: function() {
        var self = this;
        
        self.name = 'Updated c object';
        console.log(this);
        
        // 메소드의 내부함수의 this는 또 전역을 가르키는 오류 있음
        var setname = function(newName) {
            self.name = newName;
        }
     
        setName('Updated again! The c object');
        console.log(self);
    }
}
c.log(); // Object {name: 'Updated again! The c object'}

arguments & etc

call By value & referece

Share